<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表页</title>
  <style>
    ul,
    li {

      list-style: none;
    }

    ul {
      display: flex;
      border: 1px solid red;
      justify-content: space-evenly;
      padding: 10px 0;
    }

    ul li {
      width: 24%;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 0;
      cursor: pointer;

    }

    ul li img {
      width: 90%;
    }

    ul li p {
      width: 90%;
      margin: 5px;
    }
  </style>
</head>

<body>
  <ul id="list">
    <!-- <li>
      <img src="./images/g1.jpg" alt="">
      <p class="name">姓名：阿联酋美女1号</p>
      <p class="price">价格：1998</p>
      <p class="age">年龄：18</p>
    </li> -->
  </ul>
  <script>
    //1：定义数据
    var goodlist = [{
        id: 111,
        url: 'images/g1.jpg',
        name: '阿联酋美女1号',
        price: 1998,
        age: 20
      },
      {
        id: 22,
        url: 'images/g2.jpg',
        name: '阿联酋美女2号',
        price: 98,
        age: 18
      },
      {
        id: 3325,
        url: 'images/g3.jpg',
        name: '阿联酋美女3号',
        price: 998,
        age: 22
      },
      {
        id: 4,
        url: 'images/g4.jpg',
        name: '阿联酋美女4号',
        price: 9.8,
        age: 24
      },
      {
        id: 5,
        url: 'images/g3.jpg',
        name: '阿联酋美女5号',
        price: 9888,
        age: 18
      }
    ]

    //2:渲染页面
    //重点： idx="${goodlist[i].id} 给小li设置一个自定义属性（用于存放id）idx 
    //m目的：这是为了在详情页之中，可以根据id去数据库中查询对应的数据，用于渲染页面！
    for (var i = 0; i < goodlist.length; i++) {
      list.innerHTML += `
      <li idx="${goodlist[i].id}">
      <img src="${goodlist[i].url}" alt="">
      <p class="name">姓名：${goodlist[i].name}</p>
      <p class="price">价格：${goodlist[i].price}</p>
      <p class="age">年龄：${goodlist[i].age}</p>
    </li>
      `
    }
    //3：点击事件 ---这个是重点：就是获取到自定义属性this.getAttribute('idx')，并且在前面凭借一个id，使用open传递到详情页
    var lis = document.querySelectorAll("#list li")
    for (var i = 0; i < lis.length; i++) {
      //每一次点击 需要拿到每一项的id
      lis[i].onclick = function () {
        //拿到每一项的id，然后发送到详情页那边
        // console.log(this.getAttribute('idx'));
        open("3详情页.html?id=" + this.getAttribute('idx'))
      }
    }
  </script>
</body>

</html>